<template>
  <view class="tp-step">
    <view class="tp-step-line" :class="{active: active, 'line-active': activeLine}">
      <view class="step-line-before" :class="{first: first, dashed: dashed}"></view>
      <view class="step-line-circle">
        <view v-if="showIcon" class="icon-wrapper" :style="{width: iconWrapper+'px', height: iconWrapper+'px'}">
          <ai-icon :type="icon" :size="iconSize" color="var(--white)"></ai-icon>
        </view>
        <ai-icon v-if="showLoad" type="icon-refresh" :size="14" :spin="true" color="var(--brand-2)"></ai-icon>
        <view v-if="showDot" :style="{width: circleSize+'px', height: circleSize+'px'}" class="line-circle-inner"></view>
      </view>
      <view class="step-line-after" :class="{last: last, dashed: dashed}"></view>
    </view>
    <view class="tp-step-item">
      <slot></slot>
    </view>
  </view>
</template>

<script>
  export default {
    name:"tp-step",
    props: {
      dashed: {
        type: Boolean,
        default: false
      },
      active: {
        type: Boolean,
        default: false
      },
      lineGray: {
        type: Boolean,
        default: false
      },
      load: {
        type: Boolean,
        default: false
      },
      size: {
        type: String,
        default: "md"
      },
      icon: String,
      first: {
        type: Boolean,
        default: false
      },
      last: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        
      };
    },
    computed: {
      iconSize() {
        let size = this.size
        return size == "lg" ? 16 : (size == "sm" ? 8 : 12)
      },
      iconWrapper() {
        let size = this.size
        return size == "lg" ? 24 : (size == "sm" ? 16 : 20)
      },
      circleSize() {
        let size = this.size
        return size == "lg" ? 16 : (size == "sm" ? 8 : 12)
      },
      showIcon() {
        return !this.load && this.icon
      },
      showLoad() {
        return this.load
      },
      showDot() {
        return !this.load && !this.icon
      },
      iconColor() {
        return this.active ? 'var(--brand-2)' : "var(--gray-2)"
      },
      activeLine() {
        return !this.lineGray && this.active
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  $border-width:2px;
  $transform-width: $border-width * 0.5;
  $normal-color:var(--gray-5);
  $active-color:$brand-2;
  
  .tp-step {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    
    .tp-step-line {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 20px;
      
      .step-line-before, .step-line-after {
        height: $gutter;
        width: $border-width;
        border-left: $border-width solid $normal-color;
        transform: translateX($transform-width);
      }
      
      .step-line-before {
        &.dashed:not(.first) {
          border-left: $border-width dotted $normal-color;
        }

        &.first {
          border-left: transparent;
        }
      }
      
      .step-line-after {
        flex: 1;
        
        &.dashed:not(.last) {
          border-left: $border-width dotted $normal-color;
        }
      
        &.last {
          border-left: transparent;
        }
      }
      
      .step-line-circle {
        min-height: 8px;
        min-width: 8px;
        padding: 2px;
        
        .line-circle-inner {
          border-radius: 50%;
          background-color: $normal-color;
        }
        
        .icon-wrapper {
          border-radius: 50%;
          background-color: $normal-color;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      
      &.active {
        .line-circle-inner {
          background-color: $active-color;
        }
        .icon-wrapper {
          background-color: $active-color;
        }
      }
      &.line-active {
        .step-line-after {
          border-left-color:  $active-color;
          &.dashed:not(.after){
            border-left-color:  $active-color;
          }
        }
        .step-line-before {
          border-left-color:  $active-color;
          
          &.dashed:not(.first){
            border-left-color:  $active-color;
          }
        }
      }
    }
    .tp-step-item {
      flex: 1;
      margin-left: $gutter;
      margin-top: $gutter ;
    }
  }

</style>